<template>
  <div class="game-window excel-window">
    <!-- Excel标题栏 -->
    <div class="window-header">
      <div class="window-controls">
        <img src="@/assets/icons/excel.svg" class="app-icon" />
        <span class="title">Book1.xlsx - Excel</span>
      </div>
      <div class="window-buttons">
        <span class="minimize">─</span>
        <span class="maximize">□</span>
        <span class="close" @click="$router.push('/')">×</span>
      </div>
    </div>

    <!-- Excel功能区 -->
    <div class="excel-ribbon">
      <div class="quick-access-toolbar">
        <button class="save-button"><i class="fas fa-save"></i></button>
        <button class="undo-button"><i class="fas fa-undo"></i></button>
      </div>
      
      <div class="ribbon-tabs">
        <div class="tab active">文件</div>
        <div class="tab">开始</div>
        <div class="tab">插入</div>
        <div class="tab">页面布局</div>
        <div class="tab">公式</div>
        <div class="tab">数据</div>
        <div class="tab">视图</div>
      </div>

      <div class="ribbon-content">
        <div class="ribbon-group">
          <div class="group-title">剪贴板</div>
          <div class="group-content">
            <button @click="toggleDisguise">
              <i class="fas fa-paste"></i>
              <span>粘贴</span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 公式栏 -->
    <div class="formula-bar">
      <div class="name-box">A1</div>
      <div class="formula-input">
        <span class="fx">fx</span>
        <input type="text" readonly>
      </div>
    </div>

    <!-- 游戏区域 -->
    <div class="game-content" :class="{ 'disguise': isDisguised }">
      <!-- 伪装模式 -->
      <div v-if="isDisguised" class="disguise-content">
        <div class="excel-dialog">
          <h3>正在计算...</h3>
          <div class="progress-bar"></div>
          <p>正在处理大量数据，请稍候...</p>
        </div>
      </div>
      
      <!-- 游戏画布 -->
      <div v-else class="match-grid">
        <div 
          v-for="(card, index) in cards" 
          :key="index"
          class="card"
          :class="{ 'flipped': card.isFlipped, 'matched': card.isMatched }"
          @click="flipCard(index)"
        >
          <div class="card-inner">
            <div class="card-front"></div>
            <div class="card-back">
              <i :class="card.icon"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 状态栏 -->
    <div class="excel-statusbar">
      <div class="status-item">就绪</div>
      <div class="status-item">已完成配对: {{ matchedPairs }}/8</div>
      <div class="status-item">用时: {{ formatTime(gameTime) }}</div>
      <div class="zoom-control">
        <span>100%</span>
        <input type="range" min="10" max="200" value="100">
      </div>
    </div>

    <!-- 广告区域 -->
    <div class="ad-container">
      <div id="match-ad"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const isDisguised = ref(false)
const cards = ref([])
const flippedCards = ref([])
const matchedPairs = ref(0)
const gameTime = ref(0)
let timer = null

// 卡片图标配置
const cardIcons = [
  'fas fa-heart',
  'fas fa-star',
  'fas fa-smile',
  'fas fa-moon',
  'fas fa-sun',
  'fas fa-cloud',
  'fas fa-leaf',
  'fas fa-bell'
]

// 初始化游戏
const initGame = () => {
  // 创建配对卡片
  const pairs = [...cardIcons, ...cardIcons]
  cards.value = pairs
    .map(icon => ({
      icon,
      isFlipped: false,
      isMatched: false
    }))
    .sort(() => Math.random() - 0.5)

  matchedPairs.value = 0
  gameTime.value = 0
  startTimer()
}

// 翻牌
const flipCard = (index) => {
  if (isDisguised.value) return
  
  const card = cards.value[index]
  if (card.isMatched || card.isFlipped || flippedCards.value.length >= 2) return

  card.isFlipped = true
  flippedCards.value.push({ index, icon: card.icon })

  if (flippedCards.value.length === 2) {
    checkMatch()
  }
}

// 检查配对
const checkMatch = () => {
  const [first, second] = flippedCards.value
  
  if (first.icon === second.icon) {
    cards.value[first.index].isMatched = true
    cards.value[second.index].isMatched = true
    matchedPairs.value++
    
    if (matchedPairs.value === cardIcons.length) {
      setTimeout(() => {
        alert(`恭喜完成！用时：${formatTime(gameTime.value)}`)
        initGame()
      }, 500)
    }
  } else {
    setTimeout(() => {
      cards.value[first.index].isFlipped = false
      cards.value[second.index].isFlipped = false
    }, 1000)
  }
  
  flippedCards.value = []
}

// 切换伪装模式
const toggleDisguise = () => {
  isDisguised.value = !isDisguised.value
}

// 计时器
const startTimer = () => {
  if (timer) clearInterval(timer)
  timer = setInterval(() => {
    gameTime.value++
  }, 1000)
}

// 格式化时间
const formatTime = (seconds) => {
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${mins}:${secs.toString().padStart(2, '0')}`
}

// 键盘事件
const handleKeyDown = (event) => {
  if (event.key === 'Escape') {
    toggleDisguise()
  }
}

onMounted(() => {
  initGame()
  window.addEventListener('keydown', handleKeyDown)
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
  window.removeEventListener('keydown', handleKeyDown)
})
</script>

<style lang="scss" scoped>
.excel-window {
  .window-header {
    background: #217346;
    color: white;
  }

  .excel-ribbon {
    // Excel功能区样式
    // ... 与Word类似，但使用Excel的绿色主题
  }

  .formula-bar {
    height: 22px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    
    .name-box {
      width: 100px;
      border-right: 1px solid #ddd;
      padding: 0 8px;
    }
    
    .formula-input {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 0 8px;
      
      .fx {
        margin-right: 8px;
        color: #217346;
      }
      
      input {
        flex: 1;
        border: none;
        outline: none;
      }
    }
  }

  .match-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;

    .card {
      aspect-ratio: 1;
      perspective: 1000px;
      cursor: pointer;

      .card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: transform 0.6s;
      }

      &.flipped .card-inner {
        transform: rotateY(180deg);
      }

      .card-front,
      .card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2em;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      }

      .card-front {
        background: #217346;
      }

      .card-back {
        background: white;
        transform: rotateY(180deg);
        color: #217346;
      }

      &.matched {
        opacity: 0.7;
      }
    }
  }

  .disguise-content {
    .excel-dialog {
      text-align: center;
      padding: 40px;
      
      .progress-bar {
        width: 300px;
        height: 20px;
        background: #f0f0f0;
        margin: 20px auto;
        position: relative;
        overflow: hidden;
        
        &::after {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 30%;
          background: #217346;
          animation: progress 2s infinite linear;
        }
      }
    }
  }
}

@keyframes progress {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
</style> 